// let name_arr = []
// let score_arr = []
// let pay_arr = []

// let uname
// let score
// let pay
// let myChart1, myChart2

// $('#btn').on('click', function () {
//   uname = $('#name').val()
//   score = $('#score').val()
//   pay = $('#pay').val()
//   $('tbody').append(`
//         <tr>
//           <td>${uname}</td>
//           <td>${score}</td>
//           <td>${pay}</td>
//         </tr>
//       `)

//   $('#name').val('')
//   $('#score').val('')
//   $('#pay').val('')
//   name_arr.push(uname)
//   score_arr.push(score)
//   pay_arr.push(pay)

//   console.log(name_arr,pay_arr);
//   chart1()
//   chart2()
// })

function chart1() {

  myChart1 = echarts.init($('.top')[0])
  let option = {
    color: ['#3398DB'],
    xAxis: {
      type: 'category',
      data: name_arr,
      axisTick: {
        alignWithLabel: false,
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false
      },
    },
    series: [{
      data: score_arr,
      type: 'line',
      smooth: true
    }]
  }
  myChart1.setOption(option)
}


function chart2() {


  myChart2 = echarts.init($('.bottom')[0])
  let option = {
    color: ['#3398DB'],
    xAxis: {
      type: 'category',
      data: name_arr,
      axisTick: {
        show: false
      },
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false
      },
    },
    series: [{
      data: pay_arr,
      type: 'bar',
      barWidth: 40,
    }]
  }
  myChart2.setOption(option)

}





let data = [];

let name_arr = []
let score_arr = []
let pay_arr = []


function render() {
  $('tbody').html('')
  data.forEach(item => {

    $('tbody').append(`
      <tr>
        <td>${item['uname']}</td>
        <td>${item['score']}</td>
        <td>${item['pay']}</td>
      </tr>
    `)

     // name_arr.push(item.uname)
     // score_arr.push(item.score)
     // pay_arr.push(item.pay)
  });
}

$('#btn').on('click', function () {
  let obj = {}
  obj['uname'] = $('#name').val()
  obj['score'] = $('#score').val()
  obj['pay'] = $('#pay').val()
  data.push(obj)
  render()

  $('#name').val('')
  $('#score').val('')
  $('#pay').val('')
  console.log(obj,'obj');
  name_arr.push(obj.uname)
  score_arr.push(obj.score)
  pay_arr.push(obj.pay)

  console.log(data);  // [{},{},{}]
  // console.log(name_arr, 'name_arr');
  chart1()
  chart2()
})